<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="container">
    <h2 class="page-header">PromiseDemo</h2>
    <button id="btn">点击抽奖</button>
  </div>
  <script>
    function rand(m, n) {
      return Math.ceil(Math.random() * (n - m + 1)) + m - 1
    }
    const btn = document.querySelector("#btn")
    btn.addEventListener('click', function () {
      //传统方式
      // setTimeout(() => {
      //   let n = rand(1, 100);
      //   if (n <= 20) {
      //     alert("恭喜中奖")
      //   } else {
      //     alert("再接再厉")
      //   }
      // }, 2000);

      //采用primise形式
      //resolve : 解决
      //reject : 拒绝
      const p = new Promise((resolve,reject)=>{
        setTimeout(()=>{
          let n =rand(1,100)
          if(n<=30){
            resolve(n)
          }else {
            reject(n)
          }
        },1000)
      })
      //接着调用then方法
      //两个参数,都是函数,第一个是成功的方法,第二个是失败的方法
      //value: 值
      //reason:理由
      p.then(function(value){
        alert("恭喜中奖号码为:"+value)
      },(reason)=>{
        alert("再接再厉,号码为:"+reason)
      })
    })
  </script>
</body>

</html>
